<template>
  <view class="userInfo-component">
    <view class="main-box">
      <view class="user-info-box">
        <view class="left-layout">
          <view class="user-img">
            <image src="/static/user.jpg" class="user-avatar-img"></image>
          </view>
          <view class="user-info">
            <view class="user-name">东东·cidingji</view>
            <view class="user-location">
              <text class="iconfont icon-jingdong1"></text>
              <text class="user-location-text">金牌会员</text>
            </view>
          </view>
          <view class="alien-style"></view>
        </view>
        <view class="right-layout">
          <image src="/static/common/hongbao.png" class="hongbao-img" />
          <view class="huiyuan-box">
            <view class="huiyuan-text">
              <text>PLUS会员</text>
              <text class="iconfont icon-weibiaoti--10"></text>
            </view>
            <text class="huiyuan-des">您有红包未领取</text>
          </view>
        </view>
      </view>
      <view class="bottom-layout">
        <tab001 :menuList="menuList"></tab001>
      </view>
      <view class="tab-box">
        <view class="tab-box-component">
          <tab007></tab007>
        </view>
        <view class="hstab-box">
          <hstab007 :tabList="tabList"></hstab007>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  name: "",
  props: {},
  components: {},
  setup() {
    const data = reactive({
      menuList: [
        { des: "7张", title: "优惠券", tips: "" },
        { des: "明细", title: "京豆", tips: "领豆" },
        { des: "¥23700", title: "备用金", tips: "" },
        { des: "抽¥888", title: "红包", tips: "" },
        { des: "抽¥20", title: "秒送", tips: "" },
      ],
      tabList: [
        {
          tips: "每日领券",
          title: "外卖百亿补贴券 最高20元",
          guidance: "去抽奖",
        },
        {
          tips: "学生会员",
          title: "新认证得5元红包和50元餐补",
          guidance: "立即领",
        },
      ],
    });
    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
// 红包动画
@keyframes hongbao {
  0% {
    // 角度
    transform: scaleX(-1);
  }
  10% {
    transform: scaleX(1); //
  }
  15% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(10deg) scale(1.3); //
  }
  40% {
    transform: rotate(0deg) scaleX(1) scale(1);
  }
  100% {
    transform: scaleX(1);
  }
}

.userInfo-component {
  width: 100%;
  background: linear-gradient(to bottom, #ff0f23, #ffffff00);
  padding: 30rpx 15rpx;
  padding-bottom: 5rpx;
  border-radius: 20rpx 20rpx 0 0;
  box-sizing: border-box;
  .main-box {
    position: relative;
  }
}
.user-info-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .left-layout {
    flex: 1;
    height: 100rpx;
    background: #fff;
    position: relative;
    border-radius: 25rpx 0 0 0;
    .user-img {
      position: absolute;
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      left: 30rpx;
      top: -25rpx;
      border: 4rpx solid #fff;
      overflow: hidden;
      .user-avatar-img {
        width: 120%;
        height: 120%;
      }
    }
    .user-info {
      position: absolute;
      left: 170rpx;
      z-index: 1;
      font-size: 28rpx;
      padding-top: 10rpx;
      .user-name {
        font-size: 32rpx;
      }
      .user-location {
        font-size: 22rpx;
        color: #ffbb00;
        display: flex;
        align-items: center;
        // font-weight: 300;
        margin-top: 10rpx;
        .icon-jingdong1 {
          // margin-top: 4rpx;
          margin-right: 6rpx;
        }
      }
    }
  }
  .right-layout {
    height: 120rpx;
    width: 290rpx;
    background: linear-gradient(to bottom left, #443a31, #b09783);
    border-radius: 0 25rpx 0 0;
    display: flex;
    // align-items: center;
    padding-left: 50rpx;
    box-sizing: border-box;
    padding-top: 15rpx;
    .hongbao-img {
      position: relative;
      z-index: 1;
      width: 70rpx;
      height: 70rpx;
      animation-name: hongbao;
      animation-duration: 7s;
      animation-iteration-count: infinite;
      // animation: hongbao 0.5s linear 4s infinite;
    }
    .huiyuan-box {
      .huiyuan-text {
        font-size: 26rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fddfc3;
        .icon-weibiaoti--10 {
          display: block;
          transform: rotate(180deg);
          background: #fddfc3;
          color: #252320;
          font-weight: 700;
          height: 22rpx;
          width: 22rpx;
          text-align: center;
          line-height: 22rpx;
          border-radius: 50%;
          font-size: 16rpx;
        }
      }

      .huiyuan-des {
        color: #fddfc3;
        font-size: 22rpx;
        font-weight: 300;
      }
    }
  }
  .alien-style {
    position: absolute;
    background: #fff;
    border-radius: 10px 10px 0 0;
    height: 100rpx;
    transform: skewX(15deg); //调整倾斜角度
    width: 200rpx;
    right: -35rpx;

    // &::before {
    //   content: "";
    //   position: absolute;
    //   width: 20px;
    //   height: 20px;
    //   left: -20px;
    //   bottom: 0;
    //   background: #000;
    //   background: radial-gradient(circle at 0 0, transparent 20px, #e91e63 21px);
    // }
    &::after {
      content: "";
      position: absolute;
      width: 30rpx;
      height: 20rpx;
      right: -20rpx;
      bottom: 0;
      background: #000;
      background: radial-gradient(
        circle at 100% 0,
        transparent 20rpx,
        #fff 21rpx
      );
    }
  }
}
.bottom-layout {
  position: absolute;
  width: 100%;
  left: 0;
  top: 100rpx;
  background: #fff;
  border-radius: 0 25rpx 0 0;
  padding: 20rpx 0;
}
.tab-box {
  padding: 0 10rpx;
  padding-top: 130rpx;
  padding-bottom: 5rpx;
  border-radius: 0 0 25rpx 25rpx;
  background: #fff;
  box-shadow: 0rpx 2rpx 5rpx 0rpx rgba(0, 0, 0, 0.1);
  .tab-box-component {
    position: relative;
    z-index: 1;
  }
  .hstab-box {
    background: #dbf4fe;
    position: relative;
    top: -10rpx;
    padding-top: 10rpx;
    border-radius: 0 0 25rpx 25rpx;
  }
}
</style>
